<template>
	<view class="card-box" @click="$emit('click')">
		<!-- useType 0  咨询  测评  特殊 -->
		<view class="cb-conselor" v-if="info.useType!='1'"
			:style="{backgroundImage:'url('+(conselorUse?e_conselor_gray_bg:e_conselor_yellow_bg)+')',color:conselorUse?'#4F4E4E':'#18371B'}">
			<view class="cc-name limit-text-single-line">{{info.name}}</view>
			<view class="cc-num">{{info.usedNum+'/'+info.totalNum}}<span
					style="font-size: 30rpx;">{{info.useTypeInfo}}</span></view>
			<slider style="margin: 0 auto;width: 100%;" disabled :value="info.usedNum" :max="info.totalNum"
				@change="sliderChange" activeColor="#fff" backgroundColor="#7AAD78" block-size="6" />
			<view class="cc-shengyu" :style="{color:conselorUse?'#666666':'#587F56'}">
				剩余{{info.totalNum-info.usedNum}}{{info.useType=='0'?'节':'次'}}</view>
			<image :src="use_conselor_gray" mode="" v-if="conselorUse" class="conselor-use-img"></image>
		</view>

		<view class="cb-scl flex-between" v-else
			:style="{backgroundImage:'url('+(conselorUse?e_scl_gray_bg:e_scl_yellow_bg)+')',color:conselorUse?'#333333':'#3D2929'}">
			<view class="">
				<view class="cs-name limit-text-single-line">{{info.name}}</view>
				<view class="cs-content limit-text-two-line">{{info.newSummary}}</view>
			</view>
			<view style="position: relative;">
				<image :src="conselorUse?tag_scl_use:tag_scl_not_use" mode="" class="cs-tag"></image>
				<image :src="use_conselor_gray" v-if="conselorUse" mode="" class="cs-used"></image>
			</view>

		</view>

		<view class="tip-hand-position" v-if="info.showHand && !conselorUse">
			<view class="tip-hand loop-pointer">
				<image :src="staticImgs.tipHand" mode=""></image>
			</view>
		</view>
		<!-- <view class="account-card" :class="[cardClass,accountCard]"> -->
		<!-- 			<view class="card-label">{{info.type}} - {{info.equity}}</view>
			<view class="card-content">
				<view class="content-main">
					<view class="main-text">
						<text class="m-text-1">{{info.usedAmount < 0 ? 0 : info.usedAmount}}/{{info.totalAmount}}</text>
						<text class="m-text-2">节</text>
						<text class="m-text-3">(50分钟/节)</text>
					</view>

				</view>
				<slider style="margin: 0;" disabled :value="silderNumber" :max="info.totalAmount" @change="sliderChange"
					activeColor="#fff" :backgroundColor="silderBgColor" block-size="10" />
			</view>
			<view class="card-remaning">
				剩余{{info.residueNumber}}节
			</view>

			<view class="card-date">支付时间：{{info.lastPaymentTime}}</view> -->
		<!-- <view class="card-tag">{{info.mode}}</view> -->
	</view>
	</view>
</template>

<script>
	export default {
		name: "account-card",
		props: {
			type: {
				type: String,
				default: 'online'
			},
			info: {
				type: Object,
				default: () => {}
			},
		},
		data() {
			return {
				e_conselor_yellow_bg: this.imgBaseURL + '/equity/e_conselor_yellow_bg.png',
				e_scl_gray_bg: this.imgBaseURL + '/equity/e_scl_gray_bg.png',
				e_scl_yellow_bg: this.imgBaseURL + '/equity/e_scl_yellow_bg.png',
				tag_scl_not_use: this.imgBaseURL + '/equity/tag_scl_not_use.png',
				tag_scl_use: this.imgBaseURL + '/equity/tag_scl_use.png',
				use_conselor_gray: this.imgBaseURL + '/equity/use_conselor_gray.png',
				use_scl_gray: this.imgBaseURL + '/equity/use_scl_gray.png',
				e_conselor_gray_bg: this.imgBaseURL + '/equity/e_conselor_gray_bg.png',
				staticImgs: {
					tipHand: this.imgBaseURL + '/codes-manage/scl-block-tip-hand.png'
				}
			}
		},
		computed: {
			conselorUse() { //权益是否已被使用
				return this.info.totalNum - this.info.usedNum <= 0
			},
			cardClass() {
				let mode = ''
				if (this.info.type == '自费') {
					mode = 'online-card'
				} else if (this.info.mode == '线下驻场') {
					mode = 'offline-mode'
				}
				return mode
			},
			silderBgColor() {
				if (this.info.type == '自费') {
					return '#7AAD78'
				} else {
					return '#7882AD'
				}
			},
			silderNumber() {
				return this.info.usedAmount > this.info.totalAmount ? this.info.totalAmount : this.info.usedAmount
			}
		},
		methods: {
			sliderChange() {

			},
			// toEquityDetailsPage(){
			//   uni.navigateTo({
			//   	url: '/subcontractorA/'
			//   })
			// },
		}
	}
</script>

<style lang="scss" scoped>
	.loop-pointer {
		animation-iteration-count: infinite;
		animation-name: loading;
		animation-duration: 1900ms;
		animation-delay: 0;
		animation-timing-function: ease;
	}

	@keyframes loading {
		0% {
			transform: scale(1.0);
		}

		50% {
			transform: scale(.78);
		}

		100% {
			transform: scale(1.0);
		}
	}

	.tip-hand-position {
		position: absolute;
		top: 130rpx;
		right: 114rpx;

		.tip-hand {
			width: 145rpx;
			height: 120rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.card-box {
		margin-bottom: 40rpx;
		position: relative;

		.cb-conselor {
			width: 670rpx;
			height: 308rpx;
			background-size: 100% 100%;
			margin: 0 auto;
			padding: 34rpx 38rpx;
			box-sizing: border-box;
			position: relative;
		}

		.cc-name {
			font-size: 36rpx;
			font-weight: bold;
		}

		.cc-num {
			font-size: 80rpx;
			font-weight: bold;
			margin-top: 17rpx;
		}

		.cc-shengyu {
			font-size: 22rpx;
			margin-top: 10rpx;
		}

		.conselor-use-img {
			width: 145rpx;
			height: 155rpx;
			position: absolute;
			top: 55rpx;
			right: 3rpx;
		}
	}

	.cb-scl {
		width: 670rpx;
		height: 206rpx;
		background-size: 100% 100%;
		margin: 0 auto;
		padding: 30rpx 0rpx 38rpx 38rpx;
		box-sizing: border-box;

		.cs-name {
			font-size: 36rpx;
			font-weight: bold;
		}

		.cs-content {
			font-size: 24rpx;
			color: #999999;
			line-height: 32rpx;
			margin-top: 16rpx;
		}

		.cs-tag {
			width: 146rpx;
			height: 146rpx;
			margin-top: 20rpx;
			margin-right: 30rpx;
		}

		.cs-used {
			width: 145rpx;
			height: 155rpx;
			position: absolute;
			top: 20rpx;
			right: 0rpx;
		}
	}














	.account-card-comp {
		margin: auto;
		margin-bottom: 40rpx;
	}

	.account-card {
		position: relative;
		padding: 0 36rpx;

		.card-label {
			padding-top: 32rpx;
			font-size: 36rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #18371B;
		}

		.card-content {
			.content-main {
				display: flex;
				justify-content: space-between;
				margin-top: 16rpx;
				// margin-bottom: 24rpx;
				align-items: flex-end;

				.main-text {

					font-family: PingFangSC-Semibold, PingFang SC;
					color: #292D3D;

					.m-text-1 {
						font-weight: 600;
						font-size: 80rpx;
					}

					.m-text-2 {
						display: inline-block;
						margin-right: 16rpx;
						margin-left: 6rpx;
					}

					.m-text-2,
					.m-text-3 {
						font-size: 30rpx;
					}

				}

				.card-img {
					width: 122rpx;
					border-radius: 8rpx;
					height: 78rpx;
				}
			}
		}

		.card-remaning {
			margin-top: 8rpx;
			font-size: 22rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #587F56;
		}

		.card-date {
			font-size: 22rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #7AAD78;
			position: absolute;
			right: 30rpx;
			bottom: 20rpx;
			word-break: keep-all;

		}

		.card-tag {
			width: 122rpx;
			height: 42rpx;
			text-align: center;
			line-height: 42rpx;
			position: absolute;
			right: 0;
			top: 0;
			font-size: 22rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #18371B;
			border-top-right-radius: 16rpx;
			border-bottom-left-radius: 16rpx;
			border-bottom: 1px solid #FFFFFF;
			border-left: 1px solid #FFFFFF;
		}


	}

	.online-card {
		// background: linear-gradient(270deg, #B0F2B9 0%, #E7F4D8 100%);

		.card-label {
			color: #18371B;
		}

		.card-remaning {

			color: #587F56;
		}

		.card-date {

			color: #7AAD78;
		}

		.card-tag {

			color: #18371B;
		}

		.card-content {

			.content-main .main-text {

				.m-text-1,
				.m-text-2,
				.m-text-3 {

					color: #18371B;
				}

			}
		}

	}


	.offline-mode {
		.card-label {
			color: #3D2929;
		}

		.card-remaning {
			color: #785252;
		}

		.card-date {
			color: #785252;
		}
	}
</style>